<template>
  <div class="device-gatway">
    <ContentTitleVue :info="info" />
    <!-- tab切换 -->
    <Tabs @tab-change="changeTab" />
    <!-- 搜索 -->
    <Searchs @searchList="searchList" @del="del" @Ref="Ref" :total="total" />

    <el-table :data="gatwayList" border style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="80" />
      <el-table-column align="center" prop="eui" label="EUI" />
      <el-table-column align="center" prop="name" label="设备名称" />
      <el-table-column align="center" prop="mhz" label="频率" />
      <el-table-column align="center" prop="online" label="在线状态" />
      <el-table-column align="center" prop="country" label="国家" />
      <el-table-column align="center" prop="agreement" label="组网协议类型" />
      <el-table-column
        :formatter="utils.fcTimeNo"
        align="center"
        prop="bTime"
        label="绑定时间"
      />
    </el-table>
    <!-- 分页 -->
    <div class="flex jc-c bg-fff pt-10 pb-10">
      <el-pagination
        hide-on-single-page
        background
        :currPage="currPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
        @current-change="changePage"
      />
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, inject, watch } from "vue";
import ContentTitleVue from "../../components/ContentTitle.vue";
import Searchs from "./gatway/Searchs.vue";
import Tabs from "./gatway/Tabs.vue";
import * as api from "../../api/index";
const utils = inject("utils");
const info = ref({
  type: "设备",
  text: "网管列表",
  msg: "展示EUI、名称、状态等设备信息，可根据EUI、状态，和绑定时间等条件筛选具体的网关。",
});
//分页
const currPage = ref(1);
const pageSize = ref(5);
const total = ref();
const changePage = (newPage) => {
  currPage.value = newPage;
  params.value.currPage = newPage;
  getGatwayList();
};
//tabs切换
const changeTab = (nameTab) => {
  params.value.agreement = nameTab;
  getGatwayList();
};

//搜索
const searchList = (data) => {
  //转成毫秒
  let date1 = new Date(data.valueTime[0]).getTime();
  let date2 = new Date(data.valueTime[1]).getTime();
  params.value.input = data.input;
  params.value.valueState = data.valueState;
  params.value.valueTime = date1 + "-" + date2;
  getGatwayList();
};
//清除条件
const del = () => {
  params.value.input = "";
  params.value.valueState = "";
  params.value.valueTime = "";
  getGatwayList();
};
//刷新
const Ref = () => {
  params.value.input = "";
  params.value.valueState = "";
  params.value.valueTime = "";
  getGatwayList();
};

//中间参数
const params = ref({
  currPage: currPage.value,
  pageSize: pageSize.value,
  agreement: "", //tab切换
  input: "",
  valueState: "",
  valueTime: "",
});

//渲染表格
const gatwayList = ref([]);
const getGatwayList = () => {
  let data = {
    currPage: params.value.currPage,
    pageSize: params.value.pageSize,
    agreement: params.value.agreement,
    eui: params.value.input,
    online: params.value.valueState,
    date: params.value.valueTime,
  };
  api.$gatewayList(data).then((res) => {
    gatwayList.value = res.data;
    total.value = res.total;
  });
};

onMounted(getGatwayList);
</script>